<template>
  <div class="container">
    <!-- 申请开通vip 审核中 -->
    <div class="img-box mar-t--23" v-if="salesmanType === '3' ||  salesmanType === '0' || enterpriseType === '3' || enterpriseType === '0'">
      <img v-if="fileSpace" class="width-152 height-152 mar-t--18" :src="fileSpace + '/images/in-audit-2.png'" alt="">
      <p class="mar-t-15 pad-t-21 mar-b--2 font-w">申请成功</p>
      <p class="font-w">审核通过后开通店铺</p>
      <!-- <button class="go-home font-17 font-w" @click="goHome">去首页逛逛</button> -->
    </div>
    <!-- 已申请开通vip 重复申请 -->
    <div class="img-box" v-if="salesmanType === '1' && veekrayStatus === 1 || enterpriseType === '1' && veekrayStatus === 1">
      <img v-if="fileSpace" class="width-105 height-108" :src="fileSpace + '/images/duplicate-apply2.png'" alt="">
      <p class="mar-t-15 mar-b--4">您当前已开通VIP</p>
      <p>请勿重复开启</p>
    </div>
    <!-- 开通成功 -->
    <div class="img-box mar-t--23" v-if="salesmanType === '1' && veekrayStatus === 0 || enterpriseType === '1' && veekrayStatus === 0">
      <img v-if="fileSpace" class="width-152 height-152" :src="fileSpace + '/images/success-apply-2.png'" alt="">
      <p class="mar-t-20 font-w">恭喜你！开通成功</p>
      <p class="mar-t-20 s-desc"><span>{{ secondTxt }}</span>后进入首页 <span @click="goHome">立即跳转</span></p>
    </div>
    <!-- 申请店主自动通过 -->
    <div class="img-box mar-t--23" v-if="shopowner === 1 && veekrayStatus === 1">
      <img v-if="fileSpace" class="width-152 height-152" :src="fileSpace + '/images/success-apply-2.png'" alt="">
      <p class="mar-t-20 font-w">恭喜你！开通成功</p>
      <p class="mar-t-20 s-desc"><span>{{ secondTxt }}</span>后进入首页 <span @click="goHome">立即跳转</span></p>
    </div>
    <!-- 申请开通vip 无效码 -->
    <div class="img-box" v-if="salesmanType === '2'">
      <img v-if="fileSpace" class="width-152 height-152" :src="fileSpace + '/images/fail-apply-2.png'" alt="">
      <p class="mar-t-15 mar-b--4">无效申请</p>
      <p>二维码已失效</p>
    </div>
    <div class="mar-t-15 text-align-c" v-if="salesmanType === '3' ||  salesmanType === '0' ||  salesmanType === '1'">
      <button class="apply-btn" @click="applyClick">扫码进群领福利</button>
      <div class="mar-t-5 font-15 font-color-6">
        已有<span class="count-color">{{ resData.groupNum }}</span>人入群
      </div>
    </div>
    <div class="div-pop" catchtouchmove="true" v-if="showDialog">
      <div class="dialog-container">
        <div class="apply-group font-14">
          <span class="font-w">进群福利：</span>
          <span>{{ resData.joinGroupContent }}</span>
        </div>
        <div class="qr-code mar-t-10">
          <canvas canvas-id="qrCodeCanvas" class="qr-code-canvas"></canvas>
        </div>
        <div class="mar-t-10 pad-l-10 pad-r-10">
          <button class="save-btn" @click="saveToAlbum('qrCodeCanvas')">保存二维码</button>
        </div>
      </div>
      <div class="mar-t-20">
        <div class="cross-box" @click="showDialog = false">
          <van-icon name="cross" size="24px" color="#fff"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getJoinGroupTip } from '@/api/personal'
import { setMemberId, setVeekrayStatus, setEnterpriseId } from '@/utils/auth'
import { getMemberInfo } from '@/api/home'
export default {
  data() {
    return {
      salesmanType: null,
      enterpriseType: null,
      showDialog: false,
      resData: {},
      veekrayStatus: null,
      secondTxt: '',
      shopowner: 0
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.veekrayStatus = Number(this.getCurrentPage().query.veekrayStatus)
    this.shopowner = Number(this.getCurrentPage().query.shopowner)
    if (this.getCustomerId) {
      this.initCustomerInfo()
    }
    if (this.shopowner === 1 && this.veekrayStatus === 1) {
      this.time = 4
      this.timer()
    }
    if (this.getVeekrayStatus === 1) {
      setMemberId(this.getCustomerId)
      this.$utils.setMyId(this.getCustomerId)
      setVeekrayStatus(1)
    }
    // this.enterpriseType = '3'
    // this.salesmanType = '3'
    // this.veekrayStatus = 0
  },
  onUnload() {
    clearTimeout()
  },
  methods: {
    goHome() {
      setMemberId(this.getCustomerId)
      this.$utils.setMyId(this.getCustomerId)
      setTimeout(() => {
        this.$pt.reLaunch({
          url: '/pages/home/main'
        })
      }, 300)
    },
    timer() {
      if (this.time > 0) {
        this.time--
        this.secondTxt = this.time + 's'
        setTimeout(this.timer, 1000)
      } else {
        this.time = 0
        this.secondTxt = '0s'
        this.goHome()
      }
    },
    // 会员基本信息
    initCustomerInfo() {
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        if (response.data.enterpriseId) {
          setEnterpriseId(response.data.enterpriseId)
        }
        if (response.data.veekrayStatus === 1) {
          setMemberId(this.getCustomerId)
          this.$utils.setMyId(this.getCustomerId)
          setVeekrayStatus(response.data.veekrayStatus)
        }
        // 获取会员veekrayStatus，再处理开通事件
        if (this.getCurrentPage().query.salesmanType) {
          // C端激活码  申请开通vip   0成功  1您已开通了VIP  2无效码  3名片正在审核中，勿重复提交申请 4未实名
          this.salesmanType = this.getCurrentPage().query.salesmanType
          this.getJoinGroupTip()
        }
        if (this.getCurrentPage().query.enterpriseType) {
          // 众项云企 招募员端 申请开通vip   0成功  1您已开通了VIP  3名片正在审核中，勿重复提交申请 4未实名
          this.enterpriseType = this.getCurrentPage().query.enterpriseType
        }
        if ((this.salesmanType === '1' && this.veekrayStatus === 0) || (this.enterpriseType === '1' && this.veekrayStatus === 0)) {
          this.time = 4
          this.timer()
        }
        // 需要人工审核
        if (this.salesmanType === '3' || this.salesmanType === '0' || this.enterpriseType === '3' || this.enterpriseType === '0') {
          this.$pt.setStorageSync('unshoper', true)
        }
        // 申请成功
        if ((this.salesmanType === '1' && this.veekrayStatus === 1) || (this.enterpriseType === '1' && this.veekrayStatus === 1)) {
          this.$pt.removeStorageSync('unshoper')
        }
        if ((this.salesmanType === '1' && this.veekrayStatus === 0) || (this.enterpriseType === '1' && this.veekrayStatus === 0)) {
          this.$pt.removeStorageSync('unshoper')
        }
        if (this.shopowner === 1 && this.veekrayStatus === 1) {
          this.$pt.removeStorageSync('unshoper')
        }
      }).catch(() => {
      })
    },
    getJoinGroupTip() {
      getJoinGroupTip(this.getCustomerId).then(response => {
        if (response.isError) return
        this.resData = response.data
      })
    },
    applyClick() {
      this.drawQrCode()
      console.log(this.showDialog)
      this.showDialog = true
    },
    drawQrCode() {
      const that = this
      // canvas 使用的是px，如果要适应屏幕需要转化
      let rpx = that.$pt.getSystemInfoSync().windowWidth / 375
      that.$utils.showToast({
        title: '图片生成中',
        icon: 'loading',
        duration: 3000
      })
      const context = that.$pt.createCanvasContext('qrCodeCanvas')
      // 清除画布，防止层叠
      context.clearRect(0, 0, 145 * rpx, 185 * rpx)
      that.$pt.downloadFile({
        url: that.resData.joinGroupPic,
        success: function(wxaCode) {
          that.$pt.hideToast()
          context.drawImage(wxaCode.tempFilePath, 0 * rpx, 0 * rpx, 145 * rpx, 185 * rpx)
          context.draw(true)
        }
      })
    },
    saveToAlbum: function(canvasId) {
      const that = this
      that.$pt.canvasToTempFilePath({
        canvasId: canvasId,
        success: (res) => {
          const filePath = res.tempFilePath
          if (filePath) {
            that.$pt.saveImageToPhotosAlbum({
              filePath: filePath,
              success: (res) => {
                that.$utils.showToast({ title: '保存成功，请到手机相册查看' })
                that.showDialog = false
              },
              fail: function(err) {
                if (err.errMsg.indexOf('cancel') !== -1) return
                that.$pt.showModal({
                  content: '保存图片需要访问你的相册',
                  success(res) {
                    if (res.confirm) {
                      that.$pt.openSetting()
                    } else if (res.cancel) {
                      console.log(err)
                    }
                  }
                })
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
  background: #fff;
  min-height: 100vh;
  overflow: hidden;
}
.img-box{
  padding-top: 72px;
  text-align: center;
  p{
    font-size: 20px;
    &.s-desc{
      font-size: 16px;
      span{
        color: #0096FF;
      }
    }
  }
  .recruit-content{
    margin: 15px auto 0;
    text-align: center;
  }
}
img{
  display: inline-block;
}
.go-home{
  margin-top: 83px;
  width: 240px;
  background: #ffe100;
  border-radius: 50px;  
  padding: 1px 0;
  &::after{
    border: unset;
  }
}
.apply-btn{
  width: 240px;
  background: #ffe100;
  border-radius: 50px;  
  padding: 1px 0;
  &::after{
    border: unset;
  }
}
.count-color{
  color: #ff4a4a;
}
.div-pop{
  flex-direction: column;
}
.qr-code{
  padding: 10px 0;
  background: #fff9cc;
  .qr-code-canvas{
    width: 145px;
    height: 185px;
    margin: 0 auto;
  }
}
.save-btn{
  // width: 285px;
  height: 40px;
  padding: 0;
  background: #ffe200;
  font-size: 19px;
  line-height: 40px;
  border-radius: 20px;
  &::after{
    border: unset;
  }
}
.dialog-container{
  background: white;
  border-radius: 10px;
  width: 310px;
  // height: 375px;
  padding: 10px 13px 15px;
  .apply-group{
    padding: 12px 15px 15px;
    background: #fff9cc;
  }
}
.cross-box{
  width: 43px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #aeaeae;
  border-radius: 50%;
  /deep/ .van-icon{
    display: block;
  }
}
</style>
